{{if isset($articles['content']['pagination'])}}
    <section class="flex justify-center mb-8">
        <nav class="inline-flex rounded-md shadow-sm">
            {{if $articles['content']['pagination']['hasPrevious']}}
                <a href="{{$articles['content']['pagination']['url']}}{{$articles['content']['pagination']['prev']}}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <i class="fa fa-chevron-left"></i>
                </a>
            {{else}}
                <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                    <i class="fa fa-chevron-left"></i>
                </span>
            {{/if}}
            {{foreach $articles['content']['pagination']['pages'] as $page}}
                {{if $page == $articles['content']['pagination']['currentPage']}}
                    <a href="{{$articles['content']['pagination']['url']}}{{$page}}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                        {{$page}}
                    </a>
                {{else}}
                    <a href="{{$articles['content']['pagination']['url']}}{{$page}}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                        {{$page}}
                    </a>
                {{/if}}
            {{/foreach}}
            
            <!-- 下一页 -->
            {{if $articles['content']['pagination']['hasNext']}}
                <a href="{{$articles['content']['pagination']['url']}}{{$articles['content']['pagination']['currentPage'] + 1}}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    {{$articles['content']['pagination']['currentPage'] + 1}}
                </a>
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
                <a href="{{$articles['content']['pagination']['url']}}{{$articles['content']['pagination']['totalPages']}}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    {{$articles['content']['pagination']['totalPages']}}
                </a>
                <a href="{{$articles['content']['pagination']['url']}}{{$articles['content']['pagination']['next']}}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <i class="fa fa-chevron-right"></i>
                </a>
            {{else}}
                <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                    <i class="fa fa-chevron-right"></i>
                </span>
            {{/if}}
        </nav>
    </section>
{{/if}}